<template>
  <div class="B">
    <B></B>
    <div class="box-b" ref="box"></div>
  </div>
</template>
<script>
// 请求数据函数
const createData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        list: ['item1', 'item2', 'item3'],
      })
    }, 3000)
  })
}
export default {
  data() {
    return {
      timer: null,
      count: 0,
    }
  },
  // 初始化数据的地方
  async created() {
    const res = await createData()
  },
  // 操作dom的地方，
  mounted() {
    this.timer = setInterval(() => {
      this.count++
    }, 1000)
    window.addEventListener('onScroll', this.callback)
    // ref获取dom，操作dom,
    console.log(this.$refs.box)
  },
  // 获取更新后数据的地方 有点类似于watch
  updated() {},
  // 销毁，销毁定时器，销毁不属于vue的一些变量，实例
  destroyed() {
    // 销毁定时器
    this.timer = null
    // 销毁自己定义的事件
    window.removeEventListener('onScroll', this.callback)
  },
  methods: {
    callback() {},
  },
}
</script>
